<template>
 <div class="comp">
        <!-- 图表区域 -->
        <div class="chart" ref="pie"></div>
    </div>
</template>

<script>
export default {
   data() {
     return {
   echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
     };
   },

   mounted() {
 // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        this.getData()
         // 3.监听窗口变化
        window.addEventListener('resize',this.adapTive)
        this.adapOption()
  },
   methods: {
     initEcharts(){
          this.echartsInstance = this.$echarts.init(this.$refs.pie,'dark')
         let initopyion={
               // 配置标题
               title:{
                   text:'▍种植农作物面积统计',
                   top:'3%',
                   left:'3%'
               },
            
                // 配置图例
                legend:{
                   top:"15%" 
                },
               
                // 提示语
                tooltip:{
                    show:true
                },
                // series
                series:[
                    {
                        type:"pie",
                        center:['50%','60%'],//设置饼图的位置
                        label:{
                            show:true
                        }
                    }
                ]      
         }
          // 1.3绘制图表
            this.echartsInstance.setOption(initopyion)
     },
     // 2.获取业务数据
     async getData(){
         let {data}= await this.$http.get('TotalAreaCropsProportion')
         this.allData=data
          // 继续绘制图表
            this.setEcharts()
     },
     setEcharts(){
         // 3.1设置完善的配置项
         let setOptions={
            series:[
                {
                    data:this.allData//配置系列数据
            
                }
            ]
         }
          // 3.2再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
     },
      adapTive(){
       // 4.窗口适配
       //设置比例尺
       let width=this.$refs.pic.offsetWidth;
       // 比例尺基数3.5-3.7
       let  scale =width /100 *3.6
       let adapOption={
            title:{
                textSryle:{
                    fontStyle:scale
                }
            },
            legend:{
                 itemGap:scale/2,
                    itemWidth:scale,
                    itemHeight:scale/2
            },
            // 配置系列
            series:[
                {
                    radius:scale*5, //设置饼图的半径 
                }
            ]
       }
        // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
     }
  },
  beforeDestroy(){
        // 注销窗口监听器 防止内存泄露
        window.removeEventListener('resize',this.adapTive)
    }
};
</script>

<style scoped>

</style>
